<template>
  <div class='container app-container'>
    <el-card class="box-card">
      <div slot="header">
        <span>试题录入</span>
      </div>
      <!-- 学科选择框 -->
      <el-form label-width="100px" class="demo-ruleForm" ref="questionFromRefs" :model="NewValueAll"
        :rules="rules">
        <!-- 学科下拉框 -->
        <el-form-item label="学科：" prop="subject">
          <el-select v-model="NewValueAll.subjectID" placeholder="请选择" style="width:400px">
            <el-option v-for="item in subject" :key="item.id" :label="item.subjectName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 目录选择框 -->

        <el-form-item label="目录：" prop="catalog">
          <el-select v-model="NewValueAll.catalogID" placeholder="请选择" style="width:400px">
            <el-option v-for="item in catalog" :key="item.id" :label="item.directoryName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <!-- 企业选择框 -->

        <el-form-item label="企业：" prop="company">
          <el-select v-model="NewValueAll.enterpriseID" placeholder="请选择" style="width:400px">
            <el-option v-for="item in companys" :key="item.id" :label="item.shortName"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <!-- 城市选择 -->
        <el-form-item :inline="true" label="城市：" prop="citys">
          <el-select v-model="NewValueAll.province" placeholder="请选择" style="width:200px"
            @change="cityListChange">
            <el-option v-for="item in cityArry" :key="item.id" :label="item" :value="item">
            </el-option>
          </el-select>
          <el-select v-model="NewValueAll.city" placeholder="请选择" style="width:200px">
            <el-option v-for="item in regions" :key="item.id" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 方向选择框 -->

        <el-form-item label="方向：" prop="direction">
          <el-select v-model="NewValueAll.direction" placeholder="请选择" style="width:400px">
            <el-option v-for="item in directions" :key="item.id" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 题型单选框 -->
        <el-form-item label="题型：" prop="topicType">
          <el-radio-group v-model="NewValueAll.questionType">
            <el-radio :label="1">单选</el-radio>
            <el-radio :label="2">多选</el-radio>
            <el-radio :label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 难度单选框 -->
        <el-form-item label="难度：" prop="difficulty">
          <el-radio-group v-model="NewValueAll.difficulty">
            <el-radio :label="1">简单</el-radio>
            <el-radio :label="2">一般</el-radio>
            <el-radio :label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 富文本编辑器：题干 -->
        <el-form-item label="题干：" prop="stem">
          <div class="edit_container">
            <quill-editor v-model="NewValueAll.question">
            </quill-editor>
          </div>
        </el-form-item>

        <!-- 竖形单选框 -->
        <el-form-item label="选项：">
          <el-radio-group v-model="NewValueAll.options">
            <div class="erect">
              <el-radio :label="1">A:</el-radio>
              <el-input v-model="NewValueAll.codeOne" placeholder="请输入内容" class="erectInput">
              </el-input>
              <el-upload class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false">
                <img v-if="imageUrl" class="avatar">
                <i class="upload-icon">上传图片</i>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </div>
            <div class="erect">
              <el-radio :label="2">B:</el-radio>
              <el-input v-model="NewValueAll.codeTwo" placeholder="请输入内容" class="erectInput">
              </el-input>
              <el-upload class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false">
                <img v-if="imageUrl" class="avatar">
                <i class="upload-icon">上传图片</i>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </div>
            <div class="erect">
              <el-radio :label="3">C:</el-radio>
              <el-input v-model="NewValueAll.codeThree" placeholder="请输入内容" class="erectInput">
              </el-input>
              <el-upload class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false">
                <img v-if="imageUrl" class="avatar">
                <i class="upload-icon">上传图片</i>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </div>
            <div class="erect">
              <el-radio :label="4">D:</el-radio>
              <el-input v-model="NewValueAll.codeFour" placeholder="请输入内容" class="erectInput">
              </el-input>
              <el-upload class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false">
                <img v-if="imageUrl" class="avatar">
                <i class="upload-icon">上传图片</i>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </div>
          </el-radio-group>
          <el-button type="danger" plain class="erectButton" disabled>+增加选项与答案</el-button>
        </el-form-item>

        <!-- 解析区域 -->
        <el-form-item label="解析视频：">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-form-item>

        <!-- 富文本编辑器：答案解析 -->
        <el-form-item label="答案解析：" prop="stem">
          <div class="edit_container">
            <quill-editor v-model="NewValueAll.answer">
            </quill-editor>
          </div>
        </el-form-item>

        <!-- 题目备注 -->
        <el-form-item label="题目备注：">
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="NewValueAll.remarks">
          </el-input>
        </el-form-item>

        <!-- 试题标签 -->
        <el-form-item label="试题标签：">
          <el-select v-model="NewValueAll.tags" multiple filterable allow-create
            default-first-option>
            <el-option v-for="item in titleTag" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 确认按钮 -->
        <el-button type="primary" class="lastButton" @click="addQuestionslist(questionFromRefs)">
          确认提交</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { list } from '../../api/hmmm/subjects'
import { list as cataloglist } from '../../api/hmmm/directorys'
import { list as companyslist } from '../../api/hmmm/companys'
import { provinces, citys } from '../../api/hmmm/citys'
import { direction } from '../../api/hmmm/constants'
import { add } from '../../api/hmmm/questions'
export default {
  name: 'questions-new',
  components: {
    quillEditor
  },
  props: {},
  data () {
    return {
      // el-from 绑定的所有的表单数据 通过this.$refs.NewValueAll
      NewValueAll: {
        subjectID: '', // 用户点击的学科列表
        catalogID: '', // 目录数据
        enterpriseID: '', // 企业列表
        province: '', // 城市列表
        city: '', // 城区列表
        direction: [], // 方向列表
        questionType: 1, // 单选框-题型
        difficulty: 1, // 单选框-难度
        question: '', // 富文本编辑器-题干部分
        options: {}, // 竖形单选框
        codeOne: '',
        codeTwo: '',
        codeThree: '',
        codeFour: '',
        answer: '', // 富文本编辑器-答案解析
        remarks: '', // 答案解析
        tags: '' // 试题标签
      },
      subjectID: '',
      catalog: '', // 后台发过来的目录列表数据
      subject: '', // 后台发过来的学科列表数据
      companys: '', // 后台发过来的企业数据
      cityArry: [], // 后台发过来的城市
      regions: [], // 后台发过来的区域
      directions: [], // 方向
      input: '', // 竖形单选框后面文本框的双向数据绑定
      imageUrl: '',
      titleTag: [{
        value: 'HTML',
        label: '蓝湖'
      }, {
        value: 'CSS',
        label: '青瓦'
      }],
      value: [],
      // :rules引入的验证规则，通过标签内的prop传递
      rules: {
        subject: [
          { required: true, message: '请选择学科', trigger: 'blur' }
        ],
        catalog: [
          { required: true, message: '请选择目录', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        citys: [
          { required: true, message: '请选择区域', trigger: 'blur' }
        ],
        direction: [
          { required: true, message: '请选择目录', trigger: 'blur' }
        ],
        topicType: [
          { required: true, message: '请选择题型', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'blur' }
        ],
        stem: [
          { required: true, message: '请选择题干', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getSubjectList()
    this.getcatalogList()
    this.getcompanyList()
    this.cityArry = provinces()
    this.directions = direction
  },
  mounted () { },
  methods: {
    // 获取全部学科列表
    async getSubjectList () {
      try {
        const { data } = await list()
        this.subject = data.items
        // this.subjectID = this.subject.forEach(value => value.id)
        // console.log(this.subject)
        // console.log(this.subjectID)
      } catch (err) {
        this.$message('获取学科列表失败')
      }
    },
    // 获取全部目录列表
    async getcatalogList () {
      try {
        const { data } = await cataloglist()
        this.catalog = data.items
      } catch (err) {
        this.$message('获取目录列表失败')
      }
    },
    // 获取企业列表
    async getcompanyList () {
      try {
        const { data } = await companyslist()
        this.companys = data.items
      } catch (err) {
        this.$message.fail('获取企业列表失败')
      }
    },
    // 城市下拉框发生改变时获取对应的区域信息
    cityListChange (data) {
      this.NewValueAll.city = ''
      console.log(data, 12345)
      console.log(citys(data), 'citys(data)')
      this.regions = citys(data)
    },
    // 点击确认添加按钮
    async addQuestionslist (val) {
      try {
        // console.log(this.$refs)
        await add(...this.NewValueAll)
        this.$message.success('添加成功')
        this.$router.push('/questions/list')
        // console.log(res)
      } catch (err) { }
    }
  }
}
</script>
<style scoped lang="scss">
.box-card {
  height: 100%;
  width: 100%;
}
.el-input--medium {
  width: 430px;
}
.el-input__inner {
  width: 240px !important;
}
.erect {
  position: relative;
  width: 400px;
  margin-top: 20px;
  margin-bottom: 50px;
}
.erectInput {
  width: 240px;
}
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: absolute;
  // overflow: hidden;
  height: 60px;
  width: 100px;
  margin-top: -50px;
  margin-left: 315px;
}
.upload-icon {
  line-height: 60px;
  font-size: 15px !important;
  font-style: inherit;
}
.el-icon-circle-close {
  position: absolute;
  top: -8px;
  right: -7px;
  color: #a8a1a1;
  font-size: 19px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.erectButton {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  background-color: #fab6b6;
}
.lastButton {
  margin-left: 100px;
}
</style>
